<template>
<div class="grade overflow-y">

    <div class="container">
        <div class="tit text-light-gray text-left">
            我的等级
        </div>
        <div class="card member text-left flex-column-space-between">
            <div class="top flex-center-start">
                <span class="fz-18">
                    <svg-icon iconClass="member"></svg-icon>
                </span>
                <sub class="fz-15">{{ $store.getters['user/userinfo'].grade_name || '会员' }}</sub>
            </div>
            <div class="bottom">
                <div class="big">
                    <div class="plan" :style="{ width: plan + '%' }"></div>
                </div>
                <div class="flex-center-space-between fz-11">
                    <span>距离下个等级还差：{{ Math.floor($store.getters['user/userinfo'].last_grow_up) }} 成长值</span>
                    <span>{{ plan }}%</span>
                </div>
            </div>
        </div>
        <div class="tit text-left" v-html="content">
            <!-- 会员等级 -->
        </div>
        
        <!-- <div class="tit text-left">
            会员特权
        </div> -->
    </div>

</div>
</template>

<script>
export default {
    data () {
        return {
            // plan: '86%'
            content: ''
        }
    },
    computed: {
        plan () {
            return Math.floor(this.$store.getters['user/userinfo'].grow_up / (this.$store.getters['user/userinfo'].grow_up + this.$store.getters['user/userinfo'].last_grow_up) * 100)
        }
    },
    created () {
        this.$home.getHomeData('vip').then(res => {
            // console.log(res)
            this.content = res.data.vip
        })
    }
}
</script>

<style lang="less" scoped>
.tit {
    line-height: 40px;
}
.card.member {
    height: 104px;
    background: linear-gradient(to right, #af9975, #80725b);
    color: #EDEDED;
    padding-top: 14px;
    .top {
        span {
            display: inline-block;
            height: 30px;
            width: 30px;
            line-height: 30px;
            border-radius: 50%;
            background-color: #bfad91;
            text-align: center;
            .svg-icon {
                color: #ffe6be;
            }
        }
        sub {
            margin-left: 4px;
            letter-spacing: 1px;
        }
    }
    .bottom {
        .big {
            height: 4px;
            width: 100%;
            background-color: #595040;
            border-radius: 2px;
            margin-bottom: 8px;
            .plan {
                height: 100%;
                background-color: #d3b88d;
                border-radius: 2px;
            }
        }
    }
}
</style>
